<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="search">
            <el-row>
              <el-form class="form" label-width="100px" :model="orderParams">
                <el-col :span="12">
                  <el-form-item label="申请人">
                    <el-input v-model="orderParams.mobile" size="mini" placeholder="请输入申请人手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="通过情况">
                    <el-select v-model="orderParams.state" placeholder="请选择"
                               style="width:100%">
                      <el-option
                        v-for="item in stateList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="受益人">
                    <el-input v-model="orderParams.person" size="mini" placeholder="请输入受益人"></el-input>
                  </el-form-item>
                  <el-form-item label="申请时间">
                    <div class="block">
                      <el-date-picker
                        v-model="value1"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="chooseTimeRange">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="8" :offset="8">
                  <el-form-item></el-form-item>
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <div slot="header">
            <bread></bread>
          </div>
          <div class="business-table">

            <div class="table-wrapper">
              <el-table
                :data="userList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
              >

                <el-table-column
                  prop="applyTime"
                  label="申请时间"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="申请人"
                  align='center'
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  prop="person"
                  label="受益人"
                  align='center'>
                </el-table-column>
                <el-table-column
                  label="领取方式"
                  align='center'>
                  <template slot-scope="scope">
                    <span v-if="scope.row.applyMode == 1">按月申请</span>
                    <span v-if="scope.row.applyMode == 2">按年申请</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="applyMoney"
                  label="领取金额"
                  align='center'>
                </el-table-column>
                <el-table-column
                  label="是否通过"
                  align='center'>
                  <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">处理中</span>
                    <span v-if="scope.row.state == 2">已通过</span>
                    <span v-if="scope.row.state == 3">未通过</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="reason"
                  label="备注"
                  align='center'>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { pensionApplyList } from '../../api/api'

export default {
  data () {
    return {
      stateList: [{
        value: 1,
        label: '处理中'
      }, {
        value: 2,
        label: '已通过'
      }, {
        value: 3,
        label: '未通过'
      }],
      userList: [],
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId'),
        person: '',
        state: '',
        shopCode: '',
        mobile: '',
        startTime: '',
        endTime: '',
        province: '',
        city: '',
        county: ''
      },
      pageTotal: 0,
      value1: '',
      selectedOptions: []
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    chooseTimeRange (value) {
      for (var x in value) {
        this.orderParams.startTime = value[0]
        this.orderParams.endTime = value[1]
      }
    },
    // 格式化表单数据
    clearForm () {
      this.orderParams = {
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId'),
        person: '',
        state: '',
        shopCode: '',
        mobile: '',
        startTime: '',
        endTime: '',
        province: '',
        city: '',
        county: ''
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
      this.value1 = ''
      this.getGoodsList()
    },
    show (scope) {
      console.log(scope)
    },

    handleClick () {
      this.clearForm()
      this.getGoodsList()
    },

    // 表格数据
    getGoodsList (type) {
      this.userList = []
      const para = Object.assign({}, this.orderParams)
      pensionApplyList(para).then(res => {
        console.log(res)
        this.userList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.orderParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.orderParams.pageSize = val
      this.getGoodsList()
    },
    submitSearch () {
      this.getGoodsList()
    },
    getDate (date) {
      console.log(date)
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .search {
      margin: 0 0 20px 0;
    }

    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>


